import React, { Suspense, lazy } from "react";
import 'lib-flexible/flexible';
import ReactDOM from "react-dom";
import { Switch, Route, Redirect } from "react-router-dom";//三个路由组件
import { Provider } from "react-redux";//负责把属性中的store传递给子组件
import { ConnectedRouter } from 'connected-react-router';//redux绑定路由
import { ConfigProvider } from "antd";//配置
import zh_CN from "antd/lib/locale-provider/zh_CN";//国际化中文
import { store, persistor } from "./store";//引入仓库
import Tabs from "./components/Tabs";//引入底部的页签导航
// import Home from "./routes/Home";//首页
// import Mine from "./routes/MIne";//我的课程
// import Profile from "./routes/Profile";//个人中心
// import Register from "./routes/Register";//注册
// import Login from "./routes/Login";//登录
// import Detail from "./routes/Detail";
// import Cart from "./routes/Cart";
import history from './store/history';
import { PersistGate } from "redux-persist/integration/react";
import "./assets/css/common.less";//通用的样式

const RootFun = (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <ConnectedRouter history={history}>
        <ConfigProvider locale={zh_CN}>
          <main className="main-container">
            {/* <Switch>
            <Route path="/" exact component={Home}></Route>
            <Route path="/mine" exact component={Mine}></Route>
            <Route path="/profile" exact component={Profile}></Route>
            <Route path="/register" exact component={Register}></Route>
            <Route path="/login" exact component={Login}></Route>
            <Route path="/detail/:id" exact component={Detail}></Route>
            <Route path="/cart" exact component={Cart}></Route>
            <Redirect to="/"/>
          </Switch> */}

            <Suspense fallback={null}>
              <Switch>
                <Route path="/" exact component={lazy(() => import("@/routes/Home"))} />
                <Route path="/cart" component={lazy(() => import("@/routes/Cart"))} />
                <Route
                  path="/profile"
                  component={lazy(() => import("@/routes/Profile"))}
                />
                <Route
                  path="/register"
                  component={lazy(() => import("@/routes/Register"))}
                />
                <Route path="/login" component={lazy(() => import("@/routes/Login"))} />
                <Route
                  path="/detail/:id"
                  component={lazy(() => import("@/routes/Detail"))}
                />
                <Redirect to="/" />
              </Switch>
            </Suspense>
            <Tabs />
          </main>
        </ConfigProvider>
      </ConnectedRouter>
    </PersistGate>
  </Provider>
);

ReactDOM.render(RootFun, document.getElementById('root'))


